<template>
  <div class="">
    <el-row :gutter="20">
      <el-col :span="3" class="left-content">
        <ul>
          <li :class="{active: activeName=='all'}" @click="handleClick('all')">
            <span slot="label">
              <i class="el-icon-s-grid"></i>
              全部
            </span>
          </li>
          <li :class="{active: activeName=='sharing'}" @click="handleClick('sharing')">
            <span slot="label">
              <i class="el-icon-s-custom"></i>
              共享目录
            </span>
          </li>
          <li :class="{active: activeName=='noShare'}" @click="handleClick('noShare')">
            <span slot="label">
              <i class="el-icon-s-order"></i>
              不共享目录
            </span>
          </li>
        </ul>
      </el-col>
      <el-col :span="21">
        <div>
          <div class="flex-between">
            <div class="btnStyle flex-a-c ">
              <el-button class="m-l-5 m-r-5" size="small" type="primary" @click="addFacilitie">新增</el-button>
              <el-button class="m-l-5 m-r-5" size="small" type="warning" @click="handleDownloadFile">一键导出</el-button>
              <el-upload class="m-l-5 m-r-5" action="#" :on-change="handleUploadFile" :show-file-list="false" :auto-upload="false">
                <el-button size="small" type="warning">一键导入</el-button>
              </el-upload>
              <el-button class="m-l-5 m-r-5" size="small" type="danger" @click="batchDelete">批量删除</el-button>
              <!-- <el-button size="small" type="warning">一键导入</el-button> -->
            </div>
          </div>
          <TableCompEle class="m-t" ref="multipleTable" :tableData="tableData" :tableConfig="tableConfig" :tableAction="tableAction" :isSelect="true"
            :isIndex="true" :isShowPage="true" :queryParams="queryParams" @getPagination="getList" @handleSelectionChange="handleSelectionChange">
          </TableCompEle>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  getFacilitiesList,
  deleteFacilitiesBatch,
  downloadMultiple,
  uploadMultiple
  // updateFacilities
} from '@/api/yqgx/facilities'
export default {
  data() {
    return {
      activeName: 'all',
      multipleSelection: [],
      queryParams: {
        total: 20,
        currentPage: 1,
        pageSize: 10,
        type: ''
      },
      tableData: [],
      allData: [],
      tableConfig: [
        {
          prop: 'facilityNum',
          label: '资产编号'
        },
        {
          prop: 'facilityNameCn',
          label: '设施名称',
          isLink: true,
          type: 'primary',
          method: row => {
            console.log('[ row ] >', row)
          }
        },
        {
          prop: 'type',
          label: '设施类别'
        },
        {
          prop: 'managementUnit',
          label: '管理单位'
        },
        {
          prop: 'yearStr',
          label: '启用日期'
        },
        {
          prop: 'investmentScale',
          label: '投资规模(万元)'
        },
        {
          prop: 'sharedScope',
          label: '共享范围'
        }
      ],
      tableAction: {
        align: () => 'center',
        width: () => String(190),
        operations: [
          {
            label: '查看',
            isLink: true,
            type: 'primary',
            method: row => {
              this.$router.push({
                name: 'facilitiesInfo',
                params: { flag: 'look', id: row.id }
              })
              // this.$router.push({
              //   name: 'kyssDetail',
              //   params: { flag: 'look', id: row.id }
              // })
            }
          },
          {
            label: '修改',
            isLink: true,
            type: 'primary',
            method: row => {
              this.$router.push({
                name: 'facilitiesInfo',
                params: { flag: 'edit', id: row.id }
              })
              // this.$router.push({
              //   name: 'kyssDetail',
              //   params: { flag: 'edit', id: row.id }
              // })
            }
          },
          {
            label: '下载',
            isLink: true,
            type: 'primary',
            method: row => {
              this.downloadFun([row.id])
            }
          },
          {
            label: '删除',
            isLink: true,
            type: 'danger',
            method: row => {
              this.deleteFun([row.id])
            }
          }
        ]
      },
      queryString: {
        name: ''
      },
      searchForm: {
        changeMethod: () => {
          this.queryParams.currentPage = 1
        },
        formData: [
          {
            type: 'Input',
            label: '科研设施名称',
            prop: 'name',
            clearable: true,
            icon: 'el-icon-search',
            placeholder: '请输入'
          },
          {
            type: 'Input',
            label: '科研设施类型',
            prop: 'name',
            clearable: true,
            icon: 'el-icon-search',
            placeholder: '请选择'
          },
          {
            type: 'Input',
            label: '所属大单位',
            prop: 'name',
            clearable: true,
            icon: 'el-icon-search',
            placeholder: '请输入'
          }
        ]
      },
      searchAction: [
        {
          label: '查询',
          type: 'primary',
          handle: () => {
            this.queryParams.currentPage = 1
            this.$refs.multipleTable.clearSelection()
          }
        },
        {
          label: '重置',
          type: 'primary',
          plain: true,
          handle: () => {
            this.queryString = {
              name: '',
              yearStr: ''
            }
            this.queryParams.currentPage = 1
          }
        }
      ]
    }
  },
  created() { this.getList() },
  mounted() {
  },
  methods: {
    addFacilitie() {
      this.$router.push({
        name: 'facilitiesInfo',
        params: { flag: 'add' }
      })
    },
    handleDownloadFile() {
      if (this.multipleSelection.length == 0) {
        this.$message({
          type: 'warning',
          message: '请选择要导出的数据'
        })
        return
      }
      const ids = []
      this.multipleSelection.forEach(items => {
        ids.push(items.id)
      })
      this.downloadFun(ids)
    },
    batchDelete() {
      if (this.multipleSelection.length == 0) {
        this.$message({
          type: 'warning',
          message: '请选择要删除的数据'
        })
        return
      }
      const ids = []
      this.multipleSelection.forEach(items => {
        ids.push(items.id)
      })
      this.deleteFun(ids)
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleClick(val) {
      this.queryParams.type = val
      this.getList()
    },
    handleUploadFile(file) {
      const _file = file?.raw ?? file
      const formData = new FormData()
      formData.append('file', _file)
      formData.append('pathType', file.name.split('.').pop())
      uploadMultiple(formData).then(() => {
        this.getList()
      })
    },
    getList() {
      getFacilitiesList(this.queryParams).then((res) => {
        this.tableData = res.data
        this.allData = this.tableData
        this.queryParams.total = res.total
      })
    },
    downloadFun(ids) {
      this.$confirm(`确定要导出吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          downloadMultiple(ids)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    deleteFun(ids) {
      this.$confirm(`确定要删除吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteFacilitiesBatch(ids).then(() => {
            this.$refs.multipleTable.clearSelection()
            this.getList()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
  }
}
</script>

<style lang="less" scoped>
  .left-content {
    ul {
      li {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 18px;
        color: #333333;
        line-height: 30px;
        text-align: left;
        font-style: normal;
        padding: 10px 10px;
        i {
          color: #febe67;
        }
        &.active {
          background: rgba(29, 111, 219, 0.08);
          font-family: PingFang-SC, PingFang-SC;
          font-weight: bold;
          color: #1d6fdb;
          line-height: 30px;
          font-style: normal;
          i {
            color: #1d6fdb;
          }
        }
      }
    }
  }
</style>